<template>
	<view class="">
		<view class="username">
			<view class="itemTitle">收货人：</view>
			<input type="text" v-model="username" placeholder="收货人姓名" />
		</view>
		<view class="addressItem">
			<view class="itemTitle">性别</view>
			<text :class="{ sexActive: sex == 0 }" @click="sexChange(0)">先生</text>
			<text :class="{ sexActive: sex == 1 }" @click="sexChange(1)">女士</text>
		</view>
		<view class="addressItem">
			<view class="itemTitle">电话号码：</view>
			<input type="text" v-model="telphone" placeholder="收货人的联系电话" />
		</view>
		<view class="addressItem">
			<view class="itemTitle">收货地址：</view>
			<pickerAddress class="city" @change="change">{{ city }}</pickerAddress>
		</view>
		<view class="addressBox">
			<view class="itemTitle">详细地址：</view>
			<textarea v-model="address" placeholder="请输入详细地址" />
		</view>
		<view class="addressBox">
			<view class="itemTitle">备注：</view>
			<textarea v-model="remarks" placeholder="请输入备注信息" />
		</view>
		<!-- <view class="defaultItem">
			<view class="itemTitle">
				默认地址：
			</view>
			<switch @change="defaultChange" checked="true" color="#0bbbef" style="transform:scale(0.8)"/>
		</view> -->

		<uniModel :textmsg="textmsg" @operation="operation" v-show="showTextmsg"></uniModel>
		<view class="saveAddress" @click="addAddress">保存</view>
	</view>
</template>

<script>
import pickerAddress from '../../compnents/wangding-pickerAddress/wangding-pickerAddress.vue';
import { addUserApi } from '../../api/add_user.js';
import uniModel from '@/activePages/compnents/unimodel.vue';
import { identity } from '@/common/verifyLogin.js';
import { baseURL } from "@/utils/req.js"
export default {
	data() {
		return {
			city: '请选择收货地址',
			username: '',
			telphone: '',
			address: '',
			// default:1,
			sex: 0,
			remarks: '',
			memberId: '',
			open_id: '',
			nickName: '',
			headimage: '',
			showTextmsg: false,
			textmsg: {
				title: '',
				content: '',
				confirm: ''
			}
		};
	},
	components: {
		pickerAddress,
		uniModel
	},
	onLoad(option) {
		uni.setStorageSync('member_id', option.member_id);
		this.$forceUpdate();
		if (!identity()) {
			uni.navigateTo({
				url: '../index_authorization/index_authorization'
			});
		} else {
			this.authorizedLog();
		}
		this.memberId = uni.getStorageSync('member_id');
		this.$forceUpdate();
		this.open_id = uni.getStorageSync('openId');
		this.nickName = uni.getStorageSync('nickName');
		this.headimage = uni.getStorageSync('avatarUrl');
	},
	methods: {
		authorizedLog() {
			wx.login({
				success: (res) => {
					// console.log(8888,res)
					var code = res.code;
					this.authlogin(code)
				}
			})
		},
		authlogin(code) {
			let _this = this
			let params = {
				jsCode: code
			}
			uni.showLoading({
				title: "正在加载中...."
			})
			let sessionKey = uni.getStorageSync('sessionKey')
			uni.request({
				// url: "https://mlpay.aoe1.top" + '/user/wechat/jscode2session',//线上地址
				url: baseURL + '/user/wechat/jscode2session',
				method: 'POST',
				data: params,
				header: {
					'content-type': 'application/json;charset=UTF-8',
					'X-HXCharge-Authentication': '' + sessionKey
				},
				success: function(res) {
					// console.log(666,res)
					if (res.statusCode == 200) {
						uni.hideLoading()
						_this.getUserInfo();
						uni.setStorageSync("wxLogin", true);
						uni.setStorageSync('openId', res.data.data.openId);
						uni.setStorageSync('sessionKey', res.data.data.sessionKey);
					}
		
				}
			})
		},
		getUserInfo() {
			uni.showModal({
				title: '温馨提示',
				content: '亲，授权微信登录后才能正常使用小程序功能',
				success(res) {
					console.log(0)
					console.log(res)
					//如果用户点击了确定按钮
					if (res.confirm) {
						uni.getUserProfile({
							desc: '获取你的昵称、头像、地区及性别',
							success: res => {
								// console.log(res.userInfo.nickName);
								// console.log(res.userInfo.avatarUrl);
								uni.setStorageSync("nickName", res.userInfo.nickName)
								uni.setStorageSync("avatarUrl", res.userInfo.avatarUrl)
							},
							fail: res => {
								//拒绝授权
								uni.showToast({
									title: '您拒绝了请求,不能正常使用小程序',
									icon: 'error',
									duration: 1500
								});
								return;
							}
						});
					} else if (res.cancel) {
						//如果用户点击了取消按钮
						// console.log(3);
						uni.showToast({
							title: '您拒绝了请求,不能正常使用小程序',
							icon: 'error',
							duration: 1500
						});
						return;
					}
				}
			});
		},
		//确认框
		operation(e) {
			let that = this;
			that.showTextmsg = false;
			uni.navigateBack({
				delta: 1
			});
		},
		sexChange(index) {
			this.sex = index;
		},
		defaultChange(e) {
			if (e.target.value == true) {
				this.default = 1;
			} else {
				this.default = 0;
			}
		},
		change(data) {
			this.city = data.data.join('');
			console.log(data.data.join(''));
		},
		async addAddress() {
			//验证表单
			if (this.username == '' || this.username == null || this.username == undefined) {
				uni.showToast({
					title: '请填写用户名',
					icon: 'error',
					duration: 1500
				});
				return;
			}
			if (this.telphone == '' || this.telphone == null || this.telphone == undefined) {
				uni.showToast({
					title: '未填写电话号码',
					icon: 'error',
					duration: 1500
				});
				return;
			}
			if (this.city == '' || this.city == null || this.city == undefined) {
				uni.showToast({
					title: '请填写所在城市',
					icon: 'error',
					duration: 1500
				});
				return;
			}
			if (this.address == '' || this.address == null || this.address == undefined) {
				uni.showToast({
					title: '请填写详细地址',
					icon: 'error',
					duration: 1500
				});
				return;
			}
			if (this.nickName == '' || this.nickName == null || this.nickName == undefined) {
				uni.showToast({
					title: '昵称为空',
					icon: 'error',
					duration: 1500
				});
				return;
			}
			if (this.headimage == '' || this.headimage == null || this.headimage == undefined) {
				uni.showToast({
					title: '头像为空',
					icon: 'error',
					duration: 1500
				});
				return;
			}
			if (this.memberId == '' || this.memberId == null || this.memberId == undefined) {
				uni.showToast({
					title: '会员信息为空',
					icon: 'error',
					duration: 1500
				});
				return;
			}
			let params = {
				address: this.address,
				nickName: this.nickName,
				city: this.city,
				memberId: this.memberId,
				name: this.username,
				openId: this.open_id,
				phone: this.telphone,
				remark: this.remarks,
				sex: this.sex,
				headimage: this.headimage
			};
			const res = await addUserApi(params);
			// console.log(8888,res)
			if (res.statusCode === 200) {
				if (res.data.code == '0') {
					this.showTextmsg = true;
					this.textmsg.title = res.data.message;
				} else {
					this.showTextmsg = true;
					this.textmsg.title = res.data.message;
				}
			}
		}
	}
};
</script>

<style>
.username {
	padding: 0 30rpx;
	display: flex;
	height: 90rpx;
	align-items: center;
}

.itemTitle {
	width: 140rpx;
	font-size: 28rpx;
}

.username input {
	border-bottom: 1rpx solid #e5e5e5;
	flex: 1;
	line-height: 90rpx;
	height: 90rpx;
}

.addressItem {
	display: flex;
	margin: 0 30rpx;
	height: 90rpx;
	align-items: center;
	border-bottom: 1rpx solid #e5e5e5;
}

.addressItem text {
	width: 80rpx;
	height: 45rpx;
	display: block;
	border: 1rpx solid #e5e5e5;
	font-size: 24rpx;
	margin-right: 10rpx;
	text-align: center;
	line-height: 45rpx;
	color: #999;
}

.addressItem text.sexActive {
	background: #0bbbef;
	color: #fff;
	border: none;
}

.addressBox {
	height: 180rpx;
	display: flex;
	margin: 0 30rpx;
	border-bottom: 1rpx solid #e5e5e5;
}

.addressBox .itemTitle {
	width: 140rpx;
	line-height: 90rpx;
}

.addressBox textarea {
	flex: 1;
	height: 180rpx;
	padding-top: 25rpx;
}

.saveAddress {
	width: 600rpx;
	height: 80rpx;
	margin: 80rpx auto;
	background: #0bbbef;
	color: #fff;
	font-size: 28rpx;
	text-align: center;
	line-height: 80rpx;
	border-radius: 80rpx;
}

.city {
	font-size: 28rpx;
	color: #000;
}

.defaultItem {
	margin: 0 30rpx;
	display: flex;
	height: 90rpx;
	align-items: center;
	justify-content: space-between;
}
</style>
